<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewpoint" content="widt=device-width,initial-scale=1.0"/>
        <title>聆听电子天籁之音</title>
        <style>
        /* 一般设置 */

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background-color: #a9a9a9;
}

body {
  width: 70%;
  margin: 0 auto;
}

/* 文字排版 */

h1, h2, h3 {
  font-family: 'Sonsie One', 'ZCOOL KuaiLe', cursive;
  color: #2a2a2a;
}

p, input, li {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 4rem;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 10px   black;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}

p, li {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* 标题布局 */

nav, article, aside, footer {
  background-color: white;
  padding: 1%;
}

nav {
  height: 50px;
  background-color: #66ccff;
  display: flex;
  margin-bottom: 10px;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  display: inline;
  text-align: center;
  flex: 1;
}

nav a {
  display: inline-block;
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
  transition-duration: 200ms;
}

nav form {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 2em;
}

nav a:hover {
  color: white;
  text-shadow: 0 0 10px wheat;
  transition-duration: 200ms;
}

input {
  font-size: 1.6rem;
  height: 32px;
}

input[type="search"] {
  flex: 3;
}

input[type="submit"] {
  flex: 1;
  margin-left: 1rem;
  background: #333;
  border: 0;
  color: white;
}

/* 主体布局 */

main {
  display: flex;
}

article {
  flex: 4;
}

aside {
  flex: 1;
  margin-left: 10px;
  background-color: #66ccff;
}

aside li {
  padding-bottom: 10px;
}

footer {
  margin-top: 10px;
}
    </style>
    </head>
    <body>
        <h1>聆听电子天籁之音</h1>
        <div id="container">
            <header>
                <nav>
                <ul>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">作品</a></li>
                    <li><a href="#">项目</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>

                <!--搜索栏-->
                <form>
                    <input type="search" name="q" placeholder="要搜索的内容"/>
                    <!--placeholder是未输入前显示的文字，不会作为提交值，name为q，即提交的参数名为q-->
                    <input type="submit" value="搜索"/>
                    <!--一个显示着 ”搜索“ 文字的提交按钮-->
                </form>
                </nav>
            </header>
        </div>

        <!--以下是网页主体内容-->
        <main>
            <article>
                <h2>火星演唱会火热售票中</h2>

                <p>
                    洛天依是上海禾念推出的一套采用Vocaloid语音合成技术的数据库及虚构角色。歌声样本取自中国配音演员山新和日本歌手鹿乃，ideolo为“Vocaloid™
          China Project”设计出该角色。
                </p>

                <h3>九九八十一</h3>

                <p>
                    世尊如来佛 诘问着我的执着 当年我瑶池刻 闹得痛快并未想过太多 状罪责
          拿捏了我的业果 可顽心不服错 不思过 齐天大圣地上行者
                </p>

                <p>
                     那传说 忘却了我的寂寞 英雄名不堪得 何必较我混沌徒费口沫 这人间
          毕竟我真正走过 一途平九百波 九千错 凌云渡成正果但我 有九九八十一种不舍
                </p>

                <h3>达拉崩吧</h3>

                <p>
                    龘䶛䨻䎱㸞蚮䡶䴞䴝䯬䬛䰕㹚砍向㱎䖘䵈䶁䘔䶑䘓鋱䩳䵷㒪䪉䉥，然后㱎䖘䵈䶁䘔䶑䘓鋱䩳䵷㒪䪉䉥咬了龘䶛䨻䎱㸞蚮䡶䴞䴝䯬䬛䰕㹚。最后龘䶛䨻䎱㸞蚮䡶䴞䴝䯬䬛䰕㹚他战胜了㱎䖘䵈䶁䘔䶑䘓鋱䩳䵷㒪䪉䉥，救出了公主䥸䝟䳮䟑䎘䫱䉷䰯䕈䟐䬝，回到了䥰龘䰕䘋㽌䇁䵄䵻䬛蟿䆉㖀城。国王听说龘䶛䨻䎱㸞蚮䡶䴞䴝䯬䬛䰕㹚他打败了㱎䖘䵈䶁䘔䶑䘓鋱䩳䵷㒪䪉䉥，就把公主䥸䝟䳮䟑䎘䫱䉷䰯䕈䟐䬝嫁给龘䶛䨻䎱㸞蚮䡶䴞䴝䯬䬛䰕㹚。
                </p>

                <p>
                     龘䶛䨻䎱、公主䥸䝟幸福地像个童话，他们生下一个孩子也在天天渐渐长大，为了避免以后麻烦，孩子称作王浩然，他的全名十分难念，我不想说一遍……
                </p>
            </article>

            <!--侧边栏在主内容右侧-->
            <aside>
                <h2>相关链接</h2>

                <ul>
                    <li><a href="#">言和</a></li>
                    <li><a href="#">乐正绫</a></li>
                    <li><a href="#">初音未来</a></li>
                    <li><a href="#">三无Marblue</a></li>
                    <li><a href="#">二次元欢迎你</a></li>
                </ul>
            </aside>
        </main>

        <footer>
            <p>
                &copy;2025 保留所有权利 | 字 ppp 备 0054444944 号
            </p>
        </footer>
    </body>
  
</html>